<template>
  <div class="clock">
    <div class="flip running">
      <div class="digital front" data-number="0"></div>
      <div class="digital back" data-number="1"></div>
    </div> 
  </div>
</template> 

<style lang="scss">
.clock {
  display: flex;

  .flip {
    position: relative;
    width: 6rem;
    height: 10rem;
    margin: 0.2rem;
    font-size: 6rem;
    line-height: 10rem;
    font-weight: 900;
    text-align: center;
    background-color: #FFFFFF;
    border: 0.1rem solid #CCC;
    border-radius: var(--global-border-radius);

    .digital::before, .digital::after {
      position: absolute;
      content: attr(data-number);
      left: 0;
      right: 0;
      color: #000;
      background-color: #FFFFFF;
      overflow: hidden;
      -webkit-perspective: 16rem;
      perspective: 16rem;

      
    }

    // 翻页前的数字
    .digital::before {
      top: 0;
      bottom: 50%;
      border-radius: var(--global-border-radius) var(--global-border-radius) 0 0;
      border-bottom: 0.1rem solid #666;
    }

    // 翻页后的数字
    .digital::after {
      top: 50%;
      bottom: 0;
      border-radius: 0 0 var(--global-border-radius) var(--global-border-radius);
      border-top: 0.1rem solid #666;
      line-height: 0rem;
    }

    // .back::before, .front::after {
    //   z-index: 1;
    // }

    .back::after {
      transition: all 1s;
      transform-origin: center top;
      transform: rotateX(-180deg);
    }
    .back::before {
      transition: all 1s;
      transform-origin: center bottom;
      // transform: rotateX(-180deg);
    }

    .front::before {
      transition: all 1s;
      // transform: rotateX(180deg);
    }
    .front::after {
      transition: all 1s;
      // transform: rotateX(180deg);
      z-index: 1;
    }
  }

  .running  {
    .front::before {
      transform-origin: center bottom;
      animation: frontFlipDown 0.6 ease-in-out infinite;
      backface-visibility: hidden;
    }
    
    .back::after {
      transform-origin: center bottom;
      animation: backFlipDown 0.6 ease-in-out infinite;
      backface-visibility: hidden;
    }

    @keyframes frontFlipDown {
      to {
        transform: rotateX(180deg);
      }
    }

    @keyframes backFlipDown {
      to {
        transform: rotateX(0);
      }
    }
  }

  
}
</style>